<template>
    <div class="app-container">
        <!-- 基础信息 -->
        <h5 class="titleInfo">
            编辑角色
        </h5>
        <el-form class="form" ref="form" label-width="130px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门名称">
                        <el-select placeholder="请选择" v-model="form.deptId">
                            <el-option
                                v-for="item in dtoOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="角色名称">
                        <el-input v-model="form.roleName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="角色赋权">
                        <el-select
                            v-model="form.permissionIds"
                            multiple
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择">
                            <el-option
                            v-for="item in permissOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button style="margin-top:30px" type="primary" @click="submitFn()" >立即提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { listAdminRoles,listAdminPermissions,addAdminRole,getAdminRoleById,updateAdminRole} from '@/api/roleManage'
import { listAdminDeptDTO} from '@/api/adminManage'
export default {
    name:"roleManageEdit",
    data(){
        return {
            value1:"",
            form:{
                id:null,
                deptId:null,
                roleName:"",
                permissionIds:null
            },
            dtoOptions:[],
            listPage:{
                pageNum: 1,
                pageSize:10
            },
            permissOptions:[],
            
        }
    },
    created(){
        this.getDTO()
        this.form.id = Number(this.$route.query.userId)
        let datas = {
            id:this.form.id
        }
        getAdminRoleById(datas).then(res=>{
            console.log(res)
            this.form.deptId = res.data.data.deptId
            this.form.roleName = res.data.data.roleName
            let ac = res.data.data.permissions.map((e)=>{
                return Number(e.id)
            })
            this.form.permissionIds = ac
        })
    },
    methods:{
        //获取下拉部门列表
        getDTO(){
            listAdminDeptDTO().then(res=>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.deptName
                    })
                });
                this.dtoOptions = newData
            })
            //获取权限列表
            listAdminPermissions().then(res=>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.permissOptions = newData
            })
        },
        //提交
        submitFn(){
            let datas = this.form
            updateAdminRole(this.form).then(res=>{
                if(!res.data.code){
                    this.$message({
                        showClose: true,
                        message: '编辑成功',
                        type: 'success'
                    });
                    this.$router.push('/roleManageIndex')
                }else{
                    this.$message({
                        showClose: true,
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        }
    }
}
</script>
<style scoped>
.app-container{padding: 0.1px!important}
</style>
